'use strict';

(function() {
  const video = document.querySelector('video');
  const mediaStreamContrains = {
    video: true,
    audio: true,
  }
  const gotLlocalMediaStream = (stream) => {
    video.srcObject = stream;
  }
  const handleLocalMediaStreamError = (error) => {
    console.log(error);
  }
  navigator.mediaDevices.getUserMedia(mediaStreamContrains).then(gotLlocalMediaStream).catch(handleLocalMediaStreamError);

  let buffer;  // 存放录制的媒体数据
  let mediaRecorder; // 录制对象的实例
  // 当该函数被触发后，将数据压入到blob中
  const handleDataAvailable = e => {
    if(e?.data?.size > 0) {
      buffer.push(e.data);
    }
  }
  // 开始录制
  const start = () => {
    buffer = [];
    // 设置录制下来的多媒体格式
    const options = {
      mimeType: 'video/webm;codecs=vp8',
    }
    // 判断浏览器是否支持录制
    if(!MediaRecorder.isTypeSupported(options.mimeType)) {
      console.error(`${options.mimeType} is not supported!`);
      return
    }
    try {
      // 创建录制对象
      // stream，通过 getUserMedia 获取的本地视频流或通过 RTCPeerConnection 获取的远程视频流。
      // options，可选项，指定视频格式、编解码器、码率等相关信息，如 mimeType: 'video/webm;codecs=vp8'。
      mediaRecorder = new MediaRecorder(video.srcObject, options);
    } catch (error) {
      console.error(`failed to create MediaRecorder: ${error}`);
    }
    // 获取到音视频流后，你可以将该流当作参数传给 MediaRecorder 对象，并实现 ondataavailable 事件，最终将音视频流录制下来。
    mediaRecorder.ondataavailable = handleDataAvailable;
    // 开始录制，录制的媒体数据会每10秒分割成一个单独的区块，以提高读写效率和可靠性。
    mediaRecorder.start(10);
  }
  document.getElementById('start').addEventListener('click', start);

  // 停止录制
  // inactive: 闲置中
  // recording: 录制中
  // paused: 已暂停
  const stop = () => {
    if(mediaRecorder.state === 'recording') {
      mediaRecorder.stop();
      buffer = [];
    }
  }
  document.getElementById('stop').addEventListener('click', stop);

  // 将录制内容与video标签关联
  const play = () => {
    const recvideo = document.getElementById('recvideo');
    const blob = new Blob(buffer, { type: 'video/webm' });
    recvideo.src = URL.createObjectURL(blob);
    recvideo.srcObject = null;
    recvideo.controls = true;
    recvideo.play();
  }
  document.getElementById('play').addEventListener('click', play);
  
  // 下载录制好的视频
  const download = () => {
    const blob = new Blob(buffer, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.style.display = 'none';
    a.download = 'aaa.webm';
    a.click()
  }

  document.getElementById('download').addEventListener('click', download);
})()